import React from 'react';
import {View, Text, FlatList, StyleSheet, TouchableOpacity, Image} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import NavigationBar from '../component/NavigationBar'

export default class PopularPage extends React.Component {

    render() {
        return (<View style={{backgroundColor: '#fff', flex: 1, flexDirection: 'column'}}>
            <NavigationBar onMenuClick={() => alert('menu')}
                           onSearchClick={() => alert('Search')} showSearchView={true} title='最热'/>
            <ScrollableTabView tabBarPosition={'top'}>
                <PopularTab keys='0' tabLabel='Android'>Android</PopularTab>
                <PopularTab keys='1' tabLabel='iOS'>iOS</PopularTab>
                <PopularTab keys='2' tabLabel='Python'>Python</PopularTab>
                <PopularTab keys='3' tabLabel='Java'>Java</PopularTab>
            </ScrollableTabView>
        </View>)
    }
}

class PopularTab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            tabLabel: 'Android',
            refreshing: false,
            currentPage: 1
        }
    }

    _renderRow(rowData) {
        console.log(rowData.item);
        return <ProjectRow keys={`key${rowData.index}`} data={rowData.item}/>
    }

    render() {

        return <View>
            <FlatList data={this.state.dataSource}
                      renderItem={this._renderRow}
                      onRefresh={() => {
                          this.setState({refreshing: true});
                          this._getData();
                          this.setState({refreshing: false});

                      }}
                      refreshing={this.state.refreshing}
                      onEndReachedThreshold={0.5}
                      onEndReached={() => {
                          this._getData(this.state.currentPage++)
                      }}
            />
        </View>
    }

    componentDidMount() {
        this._getData()
    }

    _getData(page) {
        let _page = page ? page : 1;
        //请求网络
        let url = `https://api.github.com/search/repositories?q=${this.props.tabLabel}&sort=starts&page=${_page}`;

        fetch(url).then((response) => {
            return response.json()
        }).then((json) => {
            let d = _page === 1 ? json.items : this.state.dataSource.concat(json.items);
            this.setState({
                dataSource: d
            })
        }).done()
    }
}

class ProjectRow extends React.Component {

    render() {
        let item = this.props.data;
        return <View style={styles.container}>
            <View style={styles.container2}>
                <Text>{item.full_name}</Text>
                <Text style={{marginTop: 5}}>{item.description}</Text>
                <View style={{flexDirection: 'row', justifyContent: 'space-between', marginTop: 5}}>
                    <View style={{flexDirection: 'row', width: 100}}>
                        <Text>Author:</Text>
                        {/*<Text>{item.owner.login}</Text>*/}
                        <Image source={{uri: item.owner.avatar_url?item.owner.avatar_url:''}} style={styles.avatar}/>
                    </View>

                    <View style={{flexDirection: 'row'}}>
                        <Text>Stars:</Text>
                        <Text style={{marginLeft: 2}}>{item.stargazers_count}</Text>
                    </View>

                    <TouchableOpacity>
                        <Image source={require('../../res/images/ic_unstar_navbar.png')} style={styles.image}/>
                    </TouchableOpacity>

                </View>
            </View>

        </View>
    }
}

let styles = StyleSheet.create({
    container: {
        marginLeft: 5,
        marginRight: 5,
        marginTop: 4,
        marginBottom: 4,
        // backgroundColor: '#aaddcc'
        borderColor: '#ddd',
        borderWidth: 0.5,
        borderRadius: 4,
        elevation: 2,
        shadowColor: 'gray',
        shadowOffset: {width: 0.5, height: 0.5},
        shadowOpacity: 0.4,
        shadowRadius: 1,
    },
    container2: {
        padding: 5,
        // backgroundColor: '#ccddaa',
        marginTop: 5
    },
    image: {
        tintColor: 'steelblue',
        height: 22,
        width: 22,
        marginRight: 5
    },
    avatar: {
        marginLeft: 3,
        height: 22,
        width: 22,
    }
});